<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-09-08 16:48:31
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-12-05 21:34:49
 * @FilePath: /nhw/src/views/Work/SafetyInspection/SafetyAppendQuestion.vue
-->
<template>
  <Layout class="satety-append-question-container" title="检查问题" border>
    <section>
      <Form @submit="onSubmit" error-message-align="right">
        <CellGroup>
          <Cell
            title="检查项"
            :value="index === -1 ? '请选择检查项' : columns[index].name"
            is-link
            @click="showPicker"
          />
          <Field
            v-model="question"
            rows="3"
            autosize
            label="问题描述"
            type="textarea"
            placeholder="请简述整改建议"
          />
          <Cell
            title="问题位置"
            is-link
            :value="address || '请选择问题位置'"
            @click="showMap"
          />
          <Cell
            title="致因阶段"
            is-link
            :value="causePhaseName || '请选择致因阶段'"
          />
          <Cell title="问题图片" :border="false" />
          <Cell>
            <Uploader
              v-model="fileList"
              multiple
              :max-count="3"
              capture="camera"
            />
          </Cell>
        </CellGroup>
        <CellGroup>
          <Cell title="整改信息" :border="false" />
          <Field
            v-model="advice"
            rows="3"
            autosize
            label="整改建议"
            type="textarea"
            placeholder="请简述整改建议"
          />
          <Cell
            title="整改责任人"
            :value="responsible.name || '请选择整改责任人'"
            is-link
            @click="showSelectPerson"
          />
          <Cell title="整改责任部门" :value="responsible.departName || ''" />
        </CellGroup>
        <!-- 提交  -->
        <div class="btn-wrap">
          <Button plain native-type="submit">提交</Button>
        </div>
        <!-- 提交 -->
      </Form>

      <!-- 弹出选择框1 -->
      <Popup v-model="show" position="bottom" :style="{ height: '43%' }">
        <Picker
          show-toolbar
          :columns="columns"
          value-key="name"
          item-height="1rem"
          @confirm="onConfirm"
          @cancel="onCancel"
        >
        </Picker>
      </Popup>
      <!-- 弹出选择框 -->
    </section>
    <!-- 弹出选择框2 -->
    <Popup v-model="showBaseDate" position="bottom" :style="{ height: '100%' }">
      <MySearch
        @search="onSearch"
        mark="base-date"
        actionText="关闭"
        @cancel="handleCancel"
      />
      <div v-show="baseDate.length > 0">
        <Card v-for="item in baseDate" :key="item.rscNo" @click="choose(item)">
          <CardTitle
            :text="columns[index].name"
            :stateText="item.rrlName"
            adorn
          />
          <CardTwig left="问题描述" :right="item.desc" />
          <CardTwig left="致因阶段" :right="item.causePhaseName" />
          <CardTwig left="整改建议" :right="item.other" />
        </Card>
      </div>
      <!-- 通用错误 -->
      <Empty image="error" description="无数据" v-show="baseDate.length <= 0" />
    </Popup>
    <!-- 地图选择框 -->
    <Popup v-model="isShowMap" position="bottom" :style="{ height: '100%' }">
      <AMap @cancel="closeMap" @confirm="getPoint" />
    </Popup>
    <!-- 责任人选择框 -->
    <Popup
      v-model="isShowSelectPerson"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <MySearch
        @search="onSearch"
        mark="select-person"
        actionText="关闭"
        @cancel="handleCancel"
      />
      <CellGroup class="leader-list">
        <Cell
          v-for="item in groupLeaderList"
          :key="item.id"
          :value="item.name"
          @click.stop="selectGroupLeader(item)"
        ></Cell>
      </CellGroup>
    </Popup>
  </Layout>
</template>

<script>
import Layout from "components/Layout";
import MySearch from "components/MySearch";
import Card from "components/Card";
import CardTwig from "components/Card/CardTwig";
import CardTitle from "components/Card/CardTitle";
import AMap from "components/AMap";
import uploadImages from "@/utils/uploadImages.js";
import { getYinHanList, getDictionary, getUserList } from "@/api/work.js";
import formateDate from "@/utils/formateDate.js";
import {
  Cell,
  CellGroup,
  Popup,
  Picker,
  Form,
  Field,
  Button,
  Uploader,
  Empty,
} from "vant";
export default {
  name: "SafetyAppendQuestion",

  components: {
    Layout,
    MySearch,
    Card,
    CardTwig,
    CardTitle,
    AMap,
    Cell,
    CellGroup,
    Popup,
    Picker,
    Form,
    Field,
    Button,
    Uploader,
    Empty,
  },

  data() {
    return {
      orgNo: "",
      fileList: [],
      show: false,
      showBaseDate: false,
      baseDate: [],
      index: -1,
      isShowMap: false,
      columns: [],
      isShowSelectPerson: false,
      groupLeaderList: [],
      question: "", //问题
      advice: "", //建议
      causePhase: "", //致因阶段
      causePhaseName: "",
      responsible: {}, //责任人
      point: {}, //经纬度
      address: "", //地址
      pic: "", //图片id
      rrlName: "", //风险等级
    };
  },
  created() {
    this.orgNo = window.localStorage.getItem("orgNo");
    getDictionary("RskmgSourceControl-category").then((res) => {
      this.columns = res.param.data;
    });
  },
  mounted() {},

  methods: {
    onConfirm(value, index) {
      this.show = false;
      this.index = index;
      this.renderBaseDataList(value.id);
    },
    onCancel() {
      this.show = false;
    },
    async onSubmit() {
      this.$toast.loading({
        message: "正在上传图片",
        duration: 0,
      });

      let pic = await uploadImages(this.fileList);
      pic = pic.join(",");
      this.$toast("提交完成");

      //userinfo
      const userId = JSON.parse(window.localStorage.getItem("userInfo")).postNo;

      //保存到 store
      const data = {
        rrpType: this.columns[this.index].id, //隐患类型标识
        rrpTypeName: this.columns[this.index].name, //隐患类型名字
        causeType: this.causePhase, //致因阶段
        area: this.address, //地址
        lng: this.point.lng,
        lat: this.point.lat,
        remark: this.question, //描述
        resolveSuggest: this.advice, //建议
        resolveUser: this.responsible.id, //责任人
        resolveUserName: this.responsible.name, //责任人名
        resolveDepart: this.responsible.departId, //部门
        resolveDepartName: this.responsible.departName, //部门名
        checkUser: userId, //提交人
        resolveEndTime: formateDate(Date.now()),
        pic, //图片
        orgNo: this.orgNo,
        rrlName: this.rrlName, //风险等级
      };

      this.$store.state.questionGroup.push(data);

      setTimeout(() => {
        this.$router.back();
      }, 0);
    },
    showPicker() {
      this.show = true;
    },
    showMap() {
      this.isShowMap = true;
    },
    getPoint({ lat, lng, address }) {
      this.point = { lat, lng };
      this.address = address;
      this.closeMap();
    },
    closeMap() {
      this.isShowMap = false;
    },
    onSearch({ key, mark }) {
      if ("base-date" === mark) {
        this.renderBaseDataList(value[index].id, key);
      } else if ("select-person" === mark) {
        this.getLeaderList(key);
      }
    },
    handleCancel({ mark }) {
      if ("base-date" === mark) {
        this.showBaseDate = false;
      } else if ("select-person" === mark) {
        this.isShowSelectPerson = false;
      }
    },
    choose(data) {
      this.showBaseDate = false;
      ({
        causePhase: this.causePhase,
        causePhaseName: this.causePhaseName,
        desc: this.question,
        other: this.advice,
        rrlName: this.rrlName,
      } = data);
    },
    showSelectPerson() {
      this.getLeaderList();
      this.isShowSelectPerson = true;
    },
    selectGroupLeader(data) {
      this.responsible = data;
      this.isShowSelectPerson = false;
    },
    //获取组长列表
    async getLeaderList(keyValue = "") {
      this.$toast.loading("数据加载中...");
      const res = await getUserList({
        orgNo: this.orgNo,
        userName: keyValue,
        departNo: "",
      });
      this.groupLeaderList = res.param.data;
      this.$toast.clear();
    },
    renderBaseDataList(id, desc = "") {
      getYinHanList({ orgNo: this.orgNo, category: id, desc }).then((res) => {
        this.baseDate = res.param.data;
      });
      this.showBaseDate = true;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("~style/mixin.less");
@import url("~style/var.less");
.satety-append-question-container {
  width: 100%;
  section {
    padding-bottom: 172px;
  }
  .van-cell-group {
    margin-top: 20px;
  }
  .btn-wrap {
    width: 100%;
    padding-bottom: 44px;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    .flex();
    .van-button {
      .clickableBtn();
      overflow: hidden;
      margin: 30px auto 0;
    }
  }
}

/deep/.van-uploader__upload {
  border: 2px dashed @primary;
  width: 110px;
  height: 110px;
  border-radius: 4px;
  background: #fff;
  .van-icon {
    color: @primary;
    &::before {
      content: "\F0A2";
    }
  }
}
/deep/ .van-uploader__preview .van-uploader__preview-image {
  width: 110px;
  height: 110px;
}
</style>